<template>
  <a-button size="mini" class="gi_hover_btn" @click="handleToggleTheme">
    <template #icon>
      <icon-sun-fill :size="18" v-if="appStore.theme === 'light'"></icon-sun-fill>
      <icon-moon-fill :size="18" v-else></icon-moon-fill>
    </template>
  </a-button>
</template>

<script setup lang="ts">
import { useAppStore } from '@/stores/modules/app'
import { useDark, useToggle } from '@vueuse/core'

defineOptions({ name: 'ThemeBtn' })

const appStore = useAppStore()

const isDark = useDark({
  selector: 'body',
  attribute: 'arco-theme',
  valueDark: 'dark',
  valueLight: 'light',
  storageKey: 'arco-theme',
  onChanged(dark: boolean) {
    appStore.toggleTheme(dark)
  },
})
const toggleDark = useToggle(isDark)

const handleToggleTheme = () => {
  toggleDark()
}
</script>

<style scoped lang="scss"></style>
